<template lang="">
    <div>
        <van-cell>
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
            <div :class="{title_box:article.cover.type > 1,title_box_duo:article.cover.type <= 1}">
            <span class="custom-title">{{article.title}}</span>
            <img :src="article.cover.images[0]"  class="thumb" v-if="article.cover.type == 1">
            <div class="thumb_box" v-if="article.cover.type > 1">
                <img  v-for="(obj,index) in article.cover.images" :key="index" :src="obj" class="thumb">
            </div>
            </div>
        </template>
          <!-- 使用label插槽 -->
        <template #label>
            <div class="label-box">
                <span>作者：{{article.aut_name}}</span>
                <span>评论：{{article.comm_count}}</span>
                <span>{{formatTime(article.pubdate)}}</span>
            </div>
        </template>
        <!-- 停止冒泡 -->
        <van-icon name="cross" @click.stop="showFeedback(article.art_id)" v-if="isShowCorss"/>
        </van-cell>
    </div>
</template>
<script>
import { timeAgo } from '@/utils/date'
export default {
  props: ['article', 'isShowCorss'],
  methods: {
    formatTime: timeAgo,
    showFeedback (artId) {
      this.$bus.$emit('showBack', artId)
    }
  }
}
</script>
<style lang="less">
 .custom-title {
    margin-right: 5px;
    vertical-align: middle;
}
.title-box{
    width: 300px;
}
.title_box_duo
{
    width: 300px;
    display: flex;
    align-items: center;
}
.label-box{
  span{
      margin-right: 4px;
  }
}
.thumb{
    width: 100px;
    height: 100px;
    // position: absolute;
    // left:300px;
    // top:0;
}
.thumb_box
{
width: 300px;
display: flex;
flex-wrap: wrap;
}
</style>
